<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表汇总</title>
</head>
<script type="text/javascript" src="../js/vue.js"></script>
<body>
<div id="root">
<h1>学生信息</h1>
    <h2>姓名：{{student.name}}</h2>
    <h2>年龄：{{student.age}}</h2>
    <h2 v-if="student.sex">性别：{{student.sex}}</h2>
    <h2>爱好</h2>
    <ul>
        <li v-for="(h,index) in student.hobby" :key="index">
            {{h}}
        </li>
    </ul>
    <h2>朋友们</h2>
    <ul>
        <li v-for="(f,index) in student.friends" :key="index">
            {{f.name}}- {{f.age}}
        </li>
    </ul>
    <button @click="student.age++">年龄+1</button>
    <button @click="addSex">添加性别属性</button>
    <button @click="addFriend">在列表首位添加一名朋友</button>
    <button @click="updateFriend">修改第一个朋友为：张三</button>
    <button @click="addHobby">添加一个爱好</button>
    <button @click="updataHobby">修改第一个爱好：开车</button>
    <button @click="removeHobby">过滤掉喝酒爱好</button>
</div>
</body>
<script type="text/javascript">
    Vue.config.productionTip=false //阻止vue在启动时生成生产提示

    new Vue({
        el:'#root',
        data:{
            student: {
                name:'tom',
                age:18,
                hobby:['抽烟','喝酒','烫头'],
                friends: [
                    {name:'tony',age:20},
                    {name:'jerry',age:30},
                ]
            }
        },
        methods:{
            addSex(){
                Vue.set(this.student,'sex','男')
                // this.$set(this.student,'sex','男')
                // 两种写法
            },
            addFriend(){
             this.student.friends.unshift( {name:'jack',age:40})
            },
            updateFriend(){
                this.student.friends[0].name = '张三'
            },
            addHobby(){
                this.student.hobby.push('打桌球')
            },
            updataHobby(){
                // this.student.hobby.splice(0,1,'开车')
                // Vue.set(this.student.hobby,0,'开车')
                this.$set(this.student.hobby,0,'开车')
            },
            removeHobby(){
                this.student.hobby = this.student.hobby.filter((h)=>{
                    return h !== '喝酒'
                })
            }
        }
    })
</script>
</html>